<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Add a custom style layer</title>
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <script src="../../lib/mapbox-gl.js"></script>
    <link href="../../lib/mapbox-gl.css" rel="stylesheet" />
    <script src="../../lib/axios.min.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      let baseDataUrl = `http://${localStorage.getItem(
        "host"
      )}/mapbox-gl-js-offline-examples`;
      axios
        .get(
          baseDataUrl +
            `/resources/styles/${localStorage.getItem(
              "mbtilesStylesName"
            )}.json`
        )
        .then((res) => {
          let data = res.data;
          initMap(data);
        })
        .catch((err) => {
          console.error(err);
        });

      function initMap(style) {
        let map = new mapboxgl.Map({
          container: "map",
          center: [15.562,56.143],
          zoom: 3.5,
          style: style,
        });

        var highlightLayer = {
          id: "highlight",
          type: "custom",

          onAdd: function (map, gl) {
            var vertexSource =
              "" +
              "uniform mat4 u_matrix;" +
              "attribute vec2 a_pos;" +
              "void main() {" +
              "    gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);" +
              "}";

            var fragmentSource =
              "" +
              "void main() {" +
              "    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);" +
              "}";

            var vertexShader = gl.createShader(gl.VERTEX_SHADER);
            gl.shaderSource(vertexShader, vertexSource);
            gl.compileShader(vertexShader);
            var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
            gl.shaderSource(fragmentShader, fragmentSource);
            gl.compileShader(fragmentShader);

            this.program = gl.createProgram();
            gl.attachShader(this.program, vertexShader);
            gl.attachShader(this.program, fragmentShader);
            gl.linkProgram(this.program);

            this.aPos = gl.getAttribLocation(this.program, "a_pos");

            var helsinki = mapboxgl.MercatorCoordinate.fromLngLat({
              lng: 25.004,
              lat: 60.239,
            });
            var berlin = mapboxgl.MercatorCoordinate.fromLngLat({
              lng: 13.403,
              lat: 52.562,
            });
            var kyiv = mapboxgl.MercatorCoordinate.fromLngLat({
              lng: 30.498,
              lat: 50.541,
            });

            this.buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.bufferData(
              gl.ARRAY_BUFFER,
              new Float32Array([
                helsinki.x,
                helsinki.y,
                berlin.x,
                berlin.y,
                kyiv.x,
                kyiv.y,
              ]),
              gl.STATIC_DRAW
            );
          },

          render: function (gl, matrix) {
            gl.useProgram(this.program);
            gl.uniformMatrix4fv(
              gl.getUniformLocation(this.program, "u_matrix"),
              false,
              matrix
            );
            gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
            gl.enableVertexAttribArray(this.aPos);
            gl.vertexAttribPointer(this.aPos, 2, gl.FLOAT, false, 0, 0);
            gl.enable(gl.BLEND);
            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
          },
        };

        map.on("load", function () {
          map.addLayer(highlightLayer, "building");
        });
      }
    </script>
  </body>
</html>
